import { useState, useEffect } from "react";
import { Row, Col, Table, Button } from "antd";

function App() {
  const [data, setData] = useState([
    {
      id: 1,
      name: "**市**有限公司",
      zhzs: 37.88,
      cxzs: 16.36,
      yyss: 8090.8,
      ss: 238.32,
      gt: 0.0,
      selected: false,
    },
    {
      id: 2,
      name: "**市****有限公司",
      zhzs: 17.88,
      cxzs: 26.36,
      yyss: 1090.8,
      ss: 28.32,
      gt: 2.0,
      selected: false,
    },
  ]);
  const [rData, setRData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [rSelectedRowKeys, setRSelectedRowKeys] = useState([]);
  useEffect(() => {
    setSelectedRowKeys(rData.map((item) => item.id));
  }, [rData]);
  const columns = [
    {
      title: "企业名称",
      dataIndex: "name",
    },
    {
      title: "综合指数",
      dataIndex: "zhzs",
    },
    {
      title: "创新指数",
      dataIndex: "cxzs",
    },
    {
      title: "营业收入(万元)",
      dataIndex: "yysr",
    },
    {
      title: "税收(万元)",
      dataIndex: "ss",
    },
    {
      title: "固投(万元)",
      dataIndex: "gt",
    },
    {
      title: "操作",
      render(r) {
        const isAdded = rData.findIndex((item) => item.id === r.id) > -1;
        return (
          <>
            <Button
              onClick={() => {
                setRData([...rData, { ...r, id: Date.now() + "-" + r.id }]);
              }}
              disabled={isAdded}
            >
              {isAdded ? "已添加" : "添加"}
            </Button>
          </>
        );
      },
    },
  ];
  const columnsRight = [
    {
      title: "企业名字",
      dataIndex: "name",
    },
    {
      title: "",
      render(r) {
        return (
          <>
            <Button
              onClick={() => {
                setRData(rData.filter((item) => item.id != r.id));
                setRSelectedRowKeys([]);
              }}
            >
              X
            </Button>
          </>
        );
      },
    },
  ];
  return (
    <Row gutter="12">
      <Col span="18">
        <Button
          onClick={() => {
            setRData(
              data
                .filter((item) => selectedRowKeys.indexOf(item.id) > -1)
                .map((item) => {
                  return {
                    ...item,
                    id: Date.now() + "-" + item.id,
                  };
                })
            );
          }}
        >
          批量添加
        </Button>
        <Table
          rowSelection={{
            selectedRowKeys,
            onChange(srk) {
              // console.log(srk);
              setSelectedRowKeys(srk);
            },
          }}
          rowKey="id"
          columns={columns}
          dataSource={data}
        />
      </Col>
      <Col span="6">
        <Button
          onClick={() => {
            setRData(
              rData.filter((item) => rSelectedRowKeys.indexOf(item.id) < 0)
            );
            setRSelectedRowKeys([]);
          }}
        >
          批量移除
        </Button>
        <Button
          onClick={() => {
            setRData([]);
            setRSelectedRowKeys([]);
          }}
        >
          清空
        </Button>
        <Table
          rowSelection={{
            rSelectedRowKeys,
            onChange(srk) {
              setRSelectedRowKeys(srk);
            },
          }}
          preserveSelectedRowKeys={true}
          columns={columnsRight}
          dataSource={rData}
          rowKey="id"
        />
      </Col>
    </Row>
  );
}

export default App;
